<template>
  <div class="header">
    <Tabs 
      v-model:tabs="menuStore.tabsList" 
      v-model="menuStore.activeMenuId" 
      @change="handleChange"
      @exceed="handleExceed"
      @closeBtn="closeBtn"></Tabs>
    <div class="drag-area"></div>
    <div class="btn_box">
      <el-icon @click="minWin"><Minus /></el-icon>
      <el-icon @click="fullWin"><FullScreen /></el-icon>
      <el-icon @click="closeWin"><Close /></el-icon>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Tabs from './Tabs.vue';
import { FullScreen, Minus, Close } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useMenuStore } from '../stores/menusStore';

const menuStore = useMenuStore();

function handleExceed(tab: any) {
  menuStore.closeTab(tab.id);
  window.ipcRenderer.send('create-tab-window', JSON.stringify(tab))
}

function handleChange(tab: any) {
  menuStore.handleTabClick(tab.id);
}

function closeBtn(tab: any) {
  menuStore.closeTab(tab.id)
}

function closeWin() {
  window.ipcRenderer.send('close-tab-window', menuStore.windowId)
}

function minWin() {
  window.ipcRenderer.send('min-tab-window', menuStore.windowId)
}

function fullWin() {
  window.ipcRenderer.send('fullscreen-tab-window', menuStore.windowId)
}
</script>
<style scoped>
.header {
  width: 100%;
  display: flex;
  height: 50px;
  overflow: hidden;
}
.drag-area {
  -webkit-app-region: drag;
  user-select: none; /* 防止选中文字 */
  flex: 1;
}
.btn_box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-size: 16px;
  transform: translateY(-5px);
}
</style>
